<?php get_instance()->view('common/header');?>
<style>
    .box.box-info {
        border-top-color: #e6e6e6;
    }
    .box-header.with-border {
        border-bottom: 1px solid #f4f4f4;
    }
    .box-body {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        padding: 10px;
    }
    .box-header {
        color: #444;
        display: block;
        padding: 10px;
        position: relative;
    }
    .box.box-primary {
        border-top-color: #3c8dbc;
    }
    .box {
        position: relative;
        border-radius: 3px;
        background: #ffffff;
        border-top: 3px solid #d2d6de;
        margin-bottom: 20px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }
    #list-table>thead>tr:nth-child(2)>th{
        font-size: 12px;
        font-weight: 700;
        color:#666;
    }
    #list-table>tbody>tr>td{
        color: #808080;
    }
    tbody>tr>td:nth-child(1), thead>tr>th:nth-child(1) {
        width: auto !important;
        white-space: pre-line !important;
    }
    tbody>tr>td:nth-child(2), thead>tr>th:nth-child(2) {
        width: auto !important;
        white-space: pre-line !important;
    }
    td,th{
        vertical-align: middle !important;
    }
    #list-table td,th{text-align: center;}
</style>
<div class="page-container wrapper">
    <!-- BEGIN SIDEBAR -->
    <?php get_instance()->view('common/sidebar');?>
    <!-- END SIDEBAR -->
    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <div class="page-content" style="min-height:1200px !important">
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title"> <?php echo $title.' - 【 '.$time.' 】'?></h3>
                    <ul class="page-breadcrumb breadcrumb">
                        <li><i class="fa fa-home"></i> <a href="<?php echo getUrl('statistics/merchant');?>">商家销量统计 </a><i class="fa fa-angle-right"></i></li>
                        <li> <a href="javascript:;"><?php echo $title?> </a></li>
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <!-- BEGIN PAGE HEADER-->
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-xs-5">
                                        <div class="input-group margin">
                                            <div class="input-group-addon">
                                                选择时间  <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="form-control form-filter pull-right" name="timegap" id="start_time" value="<?php echo $timegap?>">
                                        </div>
                                        <div id="statistics" style="display:none"></div>
                                    </div>
                                    <div class="col-xs-2">
                                        <div class="input-group margin">
                                            <div class="input-group-addon">分类</div>
                                            <select class="form-control form-filter" name="category">
                                                <option value="0">全部</option>
                                                <?php foreach ($category as $c):?>
                                                    <option value="<?php echo $c['id']?>"  ><?php echo $c['cat_name']?></option>
                                                <?php endforeach;?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xs-2">
                                        <div class="input-group margin">
                                            <div class="input-group-addon">支付方式</div>
                                            <select class="form-control form-filter" name="pay_type">
                                                <option value="0" >全部</option>
                                                <?php foreach ($pay_type as $pk => $p):?>
                                                    <option value="<?php echo $pk?>" ><?php echo $p?></option>
                                                <?php endforeach;?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xs-2">
                                        <div class="input-group margin">
                                            <div class="input-group-addon">消费模式</div>
                                            <select class="form-control form-filter" name="expense_type">
                                                <option value="0" >全部</option>
                                                <?php foreach ($expense_type as $ek => $e):?>
                                                    <option value="<?php echo $ek?>"><?php echo $e?></option>
                                                <?php endforeach;?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xs-1"><input class="btn btn-block btn-info margin add-btn" type="submit" value="确定"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <h3 class="page-title" id="productcount">总计 销量：<?php echo $total_sale ?>，总额：<?php echo sprintf('%.2f',$total_amount) ?></h3>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title" style="height: 32px;line-height: 32px;"><i class="fa fa-list"></i> 商品销量
                                <?php if(adminAuthority('merchant-productExport', 'statistics')):?>
                                    <a href="javascript:;" target="_parent" class="btn btn-info margin fr export" style="color: #fff"> 导出</a>
                                <?php endif;?>
                            </h3>
                        </div>
                        <div class="panel-body">
                            <table id="list-table" class="table table-bordered table-striped" >
                                <thead>
                                    <tr role="row" class="heading">
                                        <th width="20%">产品名称</th>
                                        <th width="20%">所属分类</th>
                                        <th width="10%">销量</th>
                                        <th width="10%">总金额</th>
                                        <th width="10%">详情</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END CONTENT -->
</div>
<script type="text/javascript">
    $("select").select2();

    $(document).ready(function() {
        $('[name="merchant"]').select2({allowClear:true});
        $('[name="status"]').select2({allowClear:true});

        datatable_init({
            "sDom": "<'row'<'col-md-5 col-sm-12'<'table-group-actions pull-right'>>r><'table-scrollable't><'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>r>>",
            src: $("#list-table"),
            sAjaxSource: "<?php echo getUrl('statistics/merchant/getProductList'.$url);?>",
            aoColumnDefs : [
                {
                    'bSortable' : false,
                    'aTargets' : [0,1,3,4]
                }
            ]
        });

        $('#start_time').daterangepicker({
            format:"YYYY-MM-DD",
            singleDatePicker: false,
            showDropdowns: true,
            minDate:'2018-01-01',
            maxDate:moment(new Date()),
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract('days', 1), moment().subtract('days', 1)],
                '最近7天': [moment().subtract('days', 6), moment()],
                '最近30天': [moment().subtract('days', 29), moment()],
                '上一个月': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            opens: 'right',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
                firstDay : 1
            }
        });

        $(".add-btn").click(function () {
            var vl = $("[name='timegap']").val();
            if (!vl.length){
                show_message({status:0, message:'请选择时间'});
                return false;
            }
            $("#list-table").dataTable().fnDraw(true);

            var merchant = $("[name='merchant']").val();
            var category = $("[name='category']").val();
            var pay_type = $("[name='pay_type']").val();
            var expense_type = $("[name='expense_type']").val();
            var id  = "<?php echo get('id')?>";
            var url = '?id=' + id + '&timegap=' + vl;
            if(merchant){
                url += '&merchant='+merchant;
            }
            if(category.length){
                url += '&category='+category;
            }
            if(pay_type.length){
                url += '&pay_type='+pay_type;
            }
            if(expense_type.length){
                url += '&expense_type='+expense_type;
            }

            $.get("<?php echo getUrl('statistics/merchant/getProductList');?>"+url,function (res) {
                $("#productcount").text('总计 销量：'+(res.total_sale).toFixed(2)+'，总额：'+(res.total_amount).toFixed(2))
            },'json')
        });


        $(".export").click(function () {
            var vl = $("[name='timegap']").val();
            if (!vl.length){
                show_message({status:0, message:'请选择时间'});
                return false;
            }
            var merchant = $("[name='merchant']").val();
            var category = $("[name='category']").val();
            var pay_type = $("[name='pay_type']").val();
            var expense_type = $("[name='expense_type']").val();
            var id  = "<?php echo get('id')?>";
            var url = '?id=' + id + '&timegap=' + vl;
            if(merchant){
                url += '&merchant='+merchant;
            }
            if(category.length){
                url += '&category='+category;
            }
            if(pay_type.length){
                url += '&pay_type='+pay_type;
            }
            if(expense_type.length){
                url += '&expense_type='+expense_type;
            }
            window.location.href="<?php echo getUrl('statistics/merchant/productExport')?>"+url;
        });
    });
</script>
</body>
</html>